<template>
  <view class="container">
    <view class="modify-form">
      <view class="form-header">
        <text class="form-title">修改申请</text>
      </view>
      
      <!-- 不可修改的基础信息 -->
      <view class="form-item">
        <text class="form-label">申请人:</text>
        <text class="form-value">{{requestData.applicant}}</text>
      </view>
      
      <view class="form-item">
        <text class="form-label">寝室号:</text>
        <text class="form-value">{{requestData.dorid}}</text>
      </view>
      
      <view class="form-item">
        <text class="form-label">申请时间:</text>
        <text class="form-value">{{requestData.createTime}}</text>
      </view>
      
      <!-- 可修改的申请类型 -->
      <view class="form-item">
        <text class="form-label">申请类型:</text>
        <picker class="picker" @change="bindTypeChange" :value="currentTypeIndex" :range="requestTypes">
          <view class="picker-value">
            {{requestTypes[currentTypeIndex]}}
            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
          </view>
        </picker>
      </view>
      
      <!-- 可修改的申请详情 -->
      <view class="form-item full-width">
        <text class="form-label">申请详情:</text>
        <textarea 
          class="textarea" 
          v-model="currentContent" 
          placeholder="请详细描述您的申请(不超过1000字)" 
          maxlength="1000"
        ></textarea>
        <text class="word-count">{{currentContent.length}}/1000</text>
      </view>
      
      <view class="action-buttons">
        <button class="cancel-btn" @click="cancelModify">取消</button>
        <button class="submit-btn" @click="submitModify">确认修改</button>
      </view>
    </view>
  </view>
</template>

<script>
import { updateApply } from '../../utils/back';

  export default {
    data() {
      return {
        requestTypes: ["寝室器材损坏", "公共器材损坏", "更换寝室", "更改个人信息"],
        currentTypeIndex: 0,
        currentContent: "",
        requestData: null
      }
    },
    onLoad(options) {
      // 从路由参数获取传递过来的申请数据
      if (options.requestData) {
        this.requestData = JSON.parse(options.requestData);
        this.currentContent = this.requestData.content;
        this.currentTypeIndex = this.requestTypes.indexOf(this.requestData.type);
      }
    },
    methods: {
      bindTypeChange(e) {
        this.currentTypeIndex = e.detail.value;
      },
      cancelModify() {
        uni.navigateBack();
      },
      async submitModify() {
        if (!this.currentContent.trim()) {
          uni.showToast({
            title: '请填写申请详情',
            icon: 'none'
          });
          return;
        }
        
		let apply = {
			id: this.requestData.id,
			type: this.requestTypes[this.currentTypeIndex],
			infor: this.currentContent,
		}
		
		console.log(apply);
		
        uni.showLoading({
          title: '提交修改中...'
        });
        
		let res = await updateApply(apply)
		uni.hideLoading();
		
		if(res){
			uni.showToast({
				title:"修改成功！",
				icon:'success'
			})
			uni.navigateBack()
		}else
			uni.showToast({
				title:"修改失败！",
				icon:'error'
			})
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 30rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  .modify-form {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }
  
  .form-header {
    margin-bottom: 40rpx;
  }
  
  .form-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 36rpx;
      background-color: #07c160;
      border-radius: 4rpx;
    }
  }
  
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    
    &.full-width {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .form-label {
      color: #666;
      width: 150rpx;
      margin-bottom: 15rpx;
    }
    
    .form-value {
      color: #333;
      flex: 1;
    }
  }
  
  .picker {
    flex: 1;
  }
  
  .picker-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
  }
  
  .textarea {
    width: 100%;
    height: 300rpx;
    padding: 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    font-size: 30rpx;
  }
  
  .word-count {
    display: block;
    text-align: right;
    font-size: 26rpx;
    color: #999;
    margin-top: 10rpx;
  }
  
  .action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    
    button {
      width: 48%;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      border-radius: 45rpx;
      
      &::after {
        border: none;
      }
    }
  }
  
  .cancel-btn {
    background-color: #fff;
    color: #0e70f0;
    border: 1rpx solid #0e70f0;
  }
  
  .submit-btn {
    background-color: #0e70f0;
    color: #fff;
  }
</style>